<template>
  <div class="input-field-StdDevOrgDataScopeSelect row no-wrap items-center">
    <span
      :class="`field-label ${(Field.Label && Field.Label.trim().length)
        ? '' : 'field-label-empty'} ${Field.Required ? 'required' : ''}`"
      v-if="Field.Label !== void 0"
    >
      <q-tooltip
        v-if="Field.Description"
        anchor="top right"
      >{{$t(Field.Description)}}</q-tooltip>
      {{$t(Field.Label.trim()) || ''}}
      <span
        v-if="Field.Required"
        class="required-mark"
      >*</span>
    </span>
    <span class="content relative-position fit">
      <div class="column q-px-sm">
        <span
          v-if="Field.ReadOnly"
          class="col readonly"
          ref="readonlyContent"
        >
          <q-chip square class="bg-primary text-white"
            v-for="(ll, idx) in fieldDataLabels" :key="idx">{{ ll }}
          </q-chip>
        </span>
        <div
          v-else-if="!showInputControl"
          class="col relative-position cursor-pointer row"
          @click="showInputControl=true">
          <q-chip square class="bg-primary text-white"
            v-for="(ll, idx) in fieldDataLabels" :key="idx">{{ ll }}
          </q-chip>

          <div class="" v-if="!fieldDataLabels?.length">
            <q-btn icon="add" flat dense></q-btn>
          </div>
        </div>
        <div v-show="showInputControl" @mouseleave="showInputControl=false">
          <q-input
            v-model="searchText"
            hide-bottom-space
            :readonly="Field.ReadOnly"
            v-bind="$attrs"
            placeholder="请输入关键字搜索"
          >
          </q-input>

          <q-tree
            ref="orgTree"
            class="q-pa-md col"
            style="max-height: 600px;overflow-y:scroll"
            :nodes="Options"
            node-key="id"
            label-key="Label"
            tick-strategy="strict"
            :ticked.sync="ticked"
            :filter="searchText"
            @update:ticked="orgTreeTicked"
          >
            <template v-slot:default-header="prop">
              <div class="row items-center cursor-pointer">
                <div class="">{{ `${prop.node.Label}${prop.node.Name
                    ? ` ${prop.node.Name}` : ''}` }}
                </div>
                <q-tooltip v-if="prop.node.Description">{{ prop.node.Description }}</q-tooltip>
              </div>
            </template>
          </q-tree>
        </div>
      </div>
    </span>
  </div>
</template>

<script>
import { InputFieldMixin } from 'eis-admin-mixins';

export default {
  name: 'InputFieldStdDevDataScopeSelect',
  mixins: [InputFieldMixin],
  fieldInfo: {
    Category: '标准制修订',
    Label: '标准技术委员会选择',
    Value: 'StdDevOrgDataScopeSelect',
    Description: '',
    Extra: [
      {
        Label: '多选',
        Name: 'Multiple',
        Type: 'Boolean',
      },
    ],
  },
  data() {
    return {
      showInputControl: false,
      searchText: '',
      Options: [],
      DefaultOptions: [],
      fieldDataLabels: [],
      calcTimer: null,
      ticked: [],
    };
  },
  computed: {
  },
  watch: {
    searchText(v) {
      if (v) {
        this.$refs.orgTree.expandAll();
      }
    },
    ticked() {
      this.fieldData = this.Field.Multiple ? this.ticked : this.ticked[0];
    },
    fieldData: {
      handler() {
        this.$emit('input', this.fieldData);

        this.calcTimer = setInterval(() => {
          this.getFieldDataLabels();
        }, 300);
      },
      deep: true,
    },
  },
  beforeCreate() {
    this.getRequest('stddev/mgmt/orgs').then((d) => {
      if (d && d.msg === 'OK') {
        this.DefaultOptions = d.data;
        this.Options = d.data;
      }
    });
  },
  methods: {
    filterFn(val, update) {
      if (val === '') {
        update(() => {
          this.Options = this.DefaultOptions;
        });
        return;
      }
      update(() => {
        const needle = val.toLowerCase();
        this.Options = this.Options.filter((v) => v.Label.toLowerCase().indexOf(needle) > -1);
      });
    },
    getFieldDataLabels() {
      if (!this.$refs.orgTree) return;

      if (!this.fieldData && this.Field.Multiple) this.fieldData = [];
      const fieldData = this.Field.Multiple ? this.fieldData : [this.fieldData].filter((v) => v);

      this.fieldDataLabels = fieldData.map((v) => {
        const node = this.$refs.orgTree.getNodeByKey(v);
        return node ? node.Label : '';
      }).filter((v) => v);

      if (this.fieldDataLabels?.length) {
        clearInterval(this.calcTimer);
      }
    },
    orgTreeTicked(ticked) {
      if (!this.Field.Multiple) {
        this.ticked = [(ticked || []).pop()];
      }
    },
  },
};
</script>
